<template>
	<view class="container">
		<view class="background">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<view class="form-card">
			<view class="form-header">
				<view class="logo">🔐</view>
				<text class="title">账户登录</text>
				<text class="subtitle">请输入您的账号信息</text>
			</view>
			
			<view class="form-content">
				<view class="input-group">
					<view class="input-item">
						<view class="input-icon">
							<text class="icon">👤</text>
						</view>
						<input class="input" 
							   v-model="username"
							   placeholder="请输入用户名"
							   placeholder-class="placeholder"/>
					</view>
					<view class="input-item">
						<view class="input-icon">
							<text class="icon">🔑</text>
						</view>
						<input class="input" 
							   v-model="password"
							   password
							   placeholder="请输入密码"
							   placeholder-class="placeholder"/>
					</view>
					
					<view class="forgot-link">
						<text>忘记密码?</text>
					</view>
				</view>
				
				<button class="login-btn" type="primary" @click="handleLogin">
					<text class="btn-text">登录</text>
				</button>
				
				<view class="divider">
					<view class="line"></view>
					<text class="text">其他登录方式</text>
					<view class="line"></view>
				</view>
				
				<view class="social-login">
					<view class="social-icon" :hover-class="['hover']">📱</view>
					<view class="social-icon" :hover-class="['hover']">📧</view>
					<view class="social-icon" :hover-class="['hover']">🌐</view>
				</view>
				
				<view class="link-group">
					<text class="link-text">还没有账号?</text>
					<navigator url="/pages/Register/Register" class="link">立即注册</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '1',
				password: '1',
				isPwdfocus:true
			}
		},
		methods: {
			handleLogin(){
				console.log("handleLogin()-->登录");
				if(!this.username || !this.password){
					uni.showToast({
						title: '请输入完整信息',
						icon: 'none'
					})
					return
				}
				console.log("handleLogin()-->登录验证" + this.username);
				if(this.username){
					console.log("handleLogin()-->登录验证成功");
					uni.setStorage({
						key:'Account',
						data:this.username,
						success() {
							console.log("Account存储成功");
						},fail(e){
							console.log("Account存储失败",e);
						},
						complete() {
							console.log("Account存储完成");
						}
					})
				
					uni.switchTab({
						url:"/pages/NewsPage/NewsPage"
					})
				
			}else{
				console.log("handleLogin()-->登录验证失败");
				uni.showToast({
					title: '密码错误，请重新输入'
				});
				this.password='';
				this.isPwdfocus=true;
				
			}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		position: relative;
		overflow: hidden;
	}
	
	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
	}
	
	.circle-1 {
		width: 350rpx;
		height: 350rpx;
		top: -120rpx;
		right: -120rpx;
	}
	
	.circle-2 {
		width: 250rpx;
		height: 250rpx;
		bottom: 80rpx;
		left: -80rpx;
	}
	
	.circle-3 {
		width: 200rpx;
		height: 200rpx;
		bottom: -60rpx;
		right: 150rpx;
	}
	
	.form-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 70rpx 50rpx;
		box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.12);
		width: 100%;
		max-width: 580rpx;
		position: relative;
		z-index: 2;
	}
	
	.form-header {
		text-align: center;
		margin-bottom: 60rpx;
	}
	
	.logo {
		font-size: 80rpx;
		margin-bottom: 30rpx;
	}
	
	.title {
		display: block;
		font-size: 46rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 14rpx;
	}
	
	.subtitle {
		font-size: 26rpx;
		color: #7f8c8d;
	}
	
	.input-group {
		margin-bottom: 40rpx;
	}
	
	.input-item {
		display: flex;
		align-items: center;
		background: #f5f7fa;
		border-radius: 14rpx;
		padding: 0 30rpx;
		margin-bottom: 26rpx;
		border: 1px solid #e1e5eb;
		transition: all 0.3s ease;
		height: 96rpx;
	}
	
	.input-item:focus-within {
		border-color: #3498db;
		background: #ffffff;
		box-shadow: 0 0 0 4rpx rgba(52, 152, 219, 0.15);
	}
	
	.input-icon {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.icon {
		font-size: 34rpx;
		color: #3498db;
	}
	
	.input {
		flex: 1;
		height: 96rpx;
		font-size: 28rpx;
		color: #2c3e50;
	}
	
	.placeholder {
		color: #a0aabf;
		font-size: 28rpx;
	}
	
	.forgot-link {
		text-align: right;
		margin-bottom: 10rpx;
	}
	
	.forgot-link text {
		font-size: 24rpx;
		color: #3498db;
	}
	
	.login-btn {
		background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
		border: none;
		border-radius: 14rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 30rpx;
		box-shadow: 0 6rpx 20rpx rgba(52, 152, 219, 0.3);
		transition: all 0.3s ease;
		width: 100%;
	}
	
	.login-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 3rpx 12rpx rgba(52, 152, 219, 0.3);
	}
	
	.btn-text {
		color: #ffffff;
	}
	
	.divider {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}
	
	.divider.line {
		flex: 1;
		height: 1px;
		background-color: #e1e5eb;
	}
	
	.divider.text {
		padding: 0 20rpx;
		font-size: 22rpx;
		color: #a0aabf;
	}
	
	.social-login {
		display: flex;
		justify-content: center;
		gap: 40rpx;
		margin-bottom: 50rpx;
	}
	
	.social-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f5f7fa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		transition: all 0.3s ease;
	}
	
	.social-icon.hover {
		background-color: #e8f4fc;
		transform: scale(1.05);
	}
	
	.link-group {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16rpx;
	}
	
	.link-text {
		font-size: 24rpx;
		color: #7f8c8d;
	}
	
	.link {
		font-size: 24rpx;
		color: #3498db;
		font-weight: 600;
		text-decoration: none;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.container {
			padding: 20rpx;
		}
		
		.form-card {
			padding: 60rpx 30rpx;
		}
		
		.title {
			font-size: 40rpx;
		}
	}
</style>